<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ page isELIgnored="false"%>
<%
    String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
					+ request.getServerName() + ":" + request.getServerPort()
					+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta charset="UTF-8">
<title>blogTest</title>
<script src="/static/plugin/jquery.min.js"></script>
</head>
<link href="/static/css/index.css" rel="stylesheet" />
<link href="/static/css/m.css" rel="stylesheet" />
<body>
	<div id="bottomTools" style="position: fixed; bottom: 0px; right: 0px; padding: 20px;">
	   <div style="display : none;" title="给他点赞" id="setGoodClick" class="bottomToolsIcon bottomToolsIcon_good"><div></div></div>
	   <div style="display : none;" title="宽屏阅读" id="readModelClick" class="bottomToolsIcon bottomToolsIcon_w_b"><div></div></div>
	   <div style="display : none;" class="bottomToolsIcon bottomToolsIcon_q"><div></div></div>
	   <div class="bottomToolsIcon bottomToolsIcon_share" title="分享" onclick="showShareBlock(1);"><div></div></div>
	   <div data-toggle="tooltip" data-placement="left" title="回到顶部" class="bottomToolsIcon bottomToolsIcon_up"><div></div></div>
	</div>
	<footer>
	<p>
		Design by <a href="/home">wjyuian</a> <span style="padding-left : 30px;">沪ICP备18034352号</span>
	</p>
	</footer>
	
	<div class="middleDiv" id="shareBlockDiv">
		<div style="text-align : left; padding-bottom : 10px;">
			<span style="font-weight : bold; color : black; font-size : 15px;">分享文章</span>
			<span style="float : right; cursor : pointer; " class="shareCloseSpan" onclick="showShareBlock(0);">✕</span>
		</div>
		<div style="padding : 10px; padding-left : 17px; ">
			<div id="qrCodeDiv" class="imgDiv">
			</div>
			<div style="float : left; border-left : 1px solid #DEDEDE; margin : 30px 30px auto 30px; height : 100px;">&nbsp;</div>
			<div class="imgDiv">
				<img style="" width="160" height="160" src="/static/img/applet.png">
			</div>
			<div style="clear : both;"></div>
		</div>
		<div style="text-align : left; font-size : 13px; padding-top : 8px;">
			<div>
			使用APP的"扫一扫"功能,扫描左边的二维码，即可将网页分享给别人。
			</div>
			<div style="margin-top : 4px;">
			你也可以扫描右边本博客的小程序二维码，实时关注最新文章。
			</div>
		</div>
	</div>
</body>
<script src="/static/js/nav.js"></script>

<style type="text/css">
div.imgDiv{
	float : left;
}
.bottomToolsIcon div{
    width :55px;
    height :55px;
}
.bottomToolsIcon_q div{
    background: url("/static/img/question.png") no-repeat 15px 15px;
    background-size:20px 20px;
}
.bottomToolsIcon_share div{
    background: url("/static/img/share.png") no-repeat 13px 12px;
    background-size:26px 26px;
}
.bottomToolsIcon_up div{
    background: url("/static/img/up.png") no-repeat 13px 17px;
    background-size:24px 20px;
}

.bottomToolsIcon_good div{
    background: url("/static/img/good_1.png") no-repeat 15px 17px;
    background-size: 20px 20px;
}
.bottomToolsIcon {
	z-index: auto;
	width: 50px;
	line-height: 50px !important;
	height : 50px;
	cursor: pointer;
	opacity: 1;
	margin: 8px 0;
	overflow: hidden;
	border: none;
	-webkit-border-radius: 28px;
	border-radius: 28px;
	font: normal 20px/1 "Times New Roman", Times, serif;
	color: rgba(255,255,255,1);
	text-align: center;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	-webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
	box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.3) ;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.2) ;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
	-webkit-transform: none;
	transform: none;
	-webkit-transform-origin: 50% 50% 0;
	transform-origin: 50% 50% 0;
	background-color : white;
}
.bottomToolsIcon_q{
    background: #0199d9;
}
.bottomToolsIcon_share, .bottomToolsIcon_up{
    background-color: white;
}
.bottomToolsIcon_up{
    visibility: hidden;
}

.bottomToolsIcon_w_b div{
    background: url("/static/img/width_b.png") no-repeat 15px 15px;
    background-size: 20px 20px;
}
.bottomToolsIcon_w_s div{
    background: url("/static/img/width_s.png") no-repeat 15px 15px;
    background-size: 20px 20px;
}

.middleDiv{
    text-align: center; /*让div内部文字居中*/
    background-color: #fff;
    border-radius: 1px;
    width: 420px;
    height: 256px;
    margin: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display : none;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	z-index: 99999;
	cursor: default;
	opacity: 1;
	padding: 10px;
	overflow: hidden;
	border: none;
	-webkit-border-radius: 0;
	border-radius: 0;
	text-align: center;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	-webkit-box-shadow: 1px 1px 12px 0 rgba(0,0,0,0.3) ;
	box-shadow: 1px 1px 12px 0 rgba(0,0,0,0.3) ;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2) ;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
	-webkit-transform: none;
	transform: none;
	-webkit-transform-origin: 50% 50% 0;
	transform-origin: 50% 50% 0;
}
.shareCloseSpan:hover{
	color : red;
}
</style>
<script>
    var topForTop = 356;
    var isTopForTopShow = false;
    $(function() {
    	var obj = $('.bottomToolsIcon_up');
        $(window).scroll(function(){
            var height = $(this).scrollTop() - 0;

            if(height >= topForTop) {
            	if(!isTopForTopShow) {
                    isTopForTopShow = true;
                    obj.css({
                    	visibility : 'visible',
                    	opacity : 0
                    });
            	    obj.stop(true, true).animate({opacity : 1}, 700);
            	}
            } else {
            	if(isTopForTopShow) {
            		isTopForTopShow = false;
            	    obj.stop(true, true).animate({opacity : 0}, 700);
                    obj.css({
                        visibility : 'hidden',
                    });
            	}
            }
       });
        
        obj.click(function() {
        	$("html,body").animate({"scrollTop":0}, 500)
        });
	});
    
    function showShareBlock(n) {
    	
    	if(n) {
    		if($('#qrCodeImg').length == 0) {
    			var url = window.location.href;
    			console.log(url);
    			$('#qrCodeDiv').html('<img id="qrCodeImg" style="" width="160" height="160" src="/staticsrc/qrCode?url=' + url + '">');
    		}
	    	$('#shareBlockDiv').fadeIn(0);
    	} else {
			$('#shareBlockDiv').fadeOut(0);    		
    	}
    }

    var matched, browser;
    jQuery.uaMatch = function( ua ) {
      ua = ua.toLowerCase();
      var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
        /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
        /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
        /(msie) ([\w.]+)/.exec( ua ) ||
        ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
        [];
      return {
        browser: match[ 1 ] || "",
        version: match[ 2 ] || "0"
      };
    };
    matched = jQuery.uaMatch( navigator.userAgent );
    browser = {};
    if ( matched.browser ) {
      browser[ matched.browser ] = true;
      browser.version = matched.version;
    }
    // Chrome is Webkit, but Webkit is also Safari.
    if ( browser.chrome ) {
      browser.webkit = true;
    } else if ( browser.webkit ) {
      browser.safari = true;
    }
    jQuery.browser = browser;
    
</script>
</html>